<template>
  <div class="map">
    <div class="canvas" ref="chartsDOM"></div>
  </div>
</template>

<script >
import * as echarts from 'echarts';
// import GetqujingMap from '@/api/MapApi/GetqujingMap'   //获取远程地图数据 需联网
import axios from 'axios'

  export default {
    name:'yunnanProvinceMap',
    data(){
      return{
        MapChart:null,  //地图对象
        //每个地图板块颜色
        townColor:{},
      }
    },
    components: {},
    mounted() {
      this.initChart();  //绘制地图图表
      //加载
      this.drawCityMap();  //绘制云南地图
    },
    computed:{
    },
    methods:{
      //初始化加载地图
      initChart(){
        //初始化地图对象
        this.MapChart = echarts.init(this.$refs['chartsDOM']);
      },
      //初始化绘制地图
      drawCityMap(){
        //获取本地的地图json数据
        const provinceMap = axios.get('/map_json/云南省.json');
        // console.log('云南省地图对象：',provinceMap)

        //显示loading动画
        this.MapChart.showLoading()

        //根据获取的地图数据绘制地图
        provinceMap.then(res => {
          let dataArray = this.assignMapData(res)
          //获取数据后关闭loading动画
          this.MapChart.hideLoading();
          //注册地图
          echarts.registerMap('yn',res.data);
          //设置地图层级为0代表市级
          // this.level = 0;
          const option = {
            title:{
              text:'省级方位',
              left: '10vw', // 确保标题可见
              top:'10vh',
              textStyle: {
                color: '#40e0d0', // 修改为你想要的颜色（如 '#ff0000' 表示红色）
                // fontSize: 16,  // 可选：调整字体大小
                // fontWeight: 'bold' // 可选：调整字体粗细
              }
            },
            tooltip:{
              show:true,    //显示提示信息
            },   //配置提示框
            series: [
              {
                name: '云南地图',
                type:'map',
                map:'yn',
                label:{
                  color:'#0e0e0e',
                  show:true
                },
                data:dataArray,
                // data:[
                //     {name:'曲靖市',value: 530300,itemStyle:{areaColor: '#3af606'}},
                // ],
                //鼠标悬停配置
                emphasis:{
                  label:{
                    show:true
                  },
                  itemStyle:{
                    areaColor: '#FF0000',
                  }
                },
                selectedMode:true
              }
            ],
          };
        this.MapChart.setOption(option, { notMerge: true });
        }).catch(error => {
            console.error('地图数据加载错误:', error);
            this.MapChart.hideLoading();
        });
      },

      //  生成随机颜色
      getRandomColor(){
        return `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6,'0')}`;
      },
      //重构乡镇数据
      assignMapData(res){
          //为地图添加随机颜色
          let dataArray=[]   //地图板块数据
          for(let i=0;i<res.data.features.length;i++){
              let itemData =res.data.features[i];  //遍历板块数据
              if(itemData.properties.id === '530300'){
                //为曲靖赋值红色
                dataArray.push({name:itemData.properties.name,value: itemData.properties.id,itemStyle:{areaColor:'#FF0000'}})
              }else{
                //重构数据格式
                dataArray.push({name:itemData.properties.name,value: itemData.properties.id})
              }
             }
          return dataArray
      },
    }
}
</script>

<style scoped>
  .map{
    width: 25vw;
    height: 52vh;
    //background-color: red;
    box-sizing:border-box;
  }
  .canvas{
    width: 25vw;
    height: 52vh;
    background-color: rgb(122, 124, 121);
    position: absolute;
    //left: calc(50% - 400px);
    //position: absolute;
    //left: calc(50% - 50);
    overflow: hidden;
    border-radius:10px;
}

</style>